import React,{ Component } from 'react';
import GuestNumber from './guestnumber';
class NameForm extends Component{
  constructor(props) {
    super(props);
    this.state = {value:""};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(e){
    this.setState({value:e.target.value});
  }
  handleSubmit(e){
    if(!this.state.value){
      return false;
    }else{
      alert(this.state.value);
    }
    e.preventDefault();
  }
  render(){
    return(
      <div>
      <form onSubmit={this.handleSubmit}>
         <label>name:<input type="text" value={this.state.value} onChange={this.handleChange}/></label>
         <p><span>{this.state.value}</span></p>
         <input type="submit" value="submit"/>
      </form>
      <GuestNumber times="10" />
      </div>
    );
  }
}
export default NameForm;
